<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师评价系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/common.min.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row animated fadeInRight">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div>
                    <div class="ibox-content text-center" style="padding-bottom: 1px">
                        <div class="m-b-sm">
                            <img alt="image" id="info_imgUrl" class="img-circle" src="img/userImag/default.jpg" width="200px" height="200px">
                        </div>
                    </div>
                    <div class="ibox-content profile-content" style="padding-top: 1px">
                        <h4 class="text-center"><strong id="info_name"></strong></h4>
                        <h4><i class="fa fa-credit-card"></i> &nbsp;&nbsp;身份</h4>
                        <blockquote><p id="info_identity"></p></blockquote>
                        <h4><i class="fa fa-bullhorn"></i> &nbsp;&nbsp;个人简介</h4>
                        <blockquote><p id="info_description"></p></blockquote>
                        <h4><i class="fa fa-clock-o"></i> &nbsp;&nbsp;注册时间</h4>
                        <blockquote><p id="info_registerDate"></p></blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="clients-list" style="margin-top: 0px">
                        <ul class="nav nav-tabs">
                            <!--<span class="pull-right small text-muted">xxx</span>-->
                            <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-user"></i> 基本信息</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-2" id="course-tab"><i class="fa fa-book"></i> 已学课程</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-3" id="msg-tab"><i class="fa fa-envelope"></i> 留言记录</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane tab-pane-hight active">
                                 <form class="form-horizontal m-t" id="userForm" style="margin-top:35px;">
                                        <div class="form-group" id="userName-group">
                                            <label class="col-sm-3 control-label">真实姓名：</label>
                                            <div class="col-sm-8">
                                                <input id="userName" name="userName" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error">
                                            </div>
                                        </div>
                                         <div class="form-group">
                                             <label class="col-sm-3 control-label">E-mail：</label>
                                             <div class="col-sm-8">
                                                 <input id="email" name="email" class="form-control" type="email">
                                             </div>
                                         </div>
                                         <div class="form-group">
                                             <label class="col-sm-3 control-label">手机号码：</label>
                                             <div class="col-sm-8">
                                                 <input id="telphone" name="telphone" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error">
                                             </div>
                                         </div>
                                         <div class="form-group">
                                             <label class="col-sm-3 control-label">一句话描述：</label>
                                             <div class="col-sm-8">
                                                 <input id="description" name="description" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error">
                                             </div>
                                         </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">更改密码：</label>
                                            <div class="col-sm-8">
                                                <input id="passWord" name="passWord" class="form-control" type="password">
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> (＞﹏＜) 密码更改选填哦~</span>
                                            </div>
                                        </div>
                                        <div class="form-group" id="confirm-group">
                                            <label class="col-sm-3 control-label">确认新密码：</label>
                                            <div class="col-sm-8">
                                                <input id="confirm_passWord" name="confirm_passWord" class="form-control" type="password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-8 col-sm-offset-9">
                                                <button class="btn btn-primary" onclick="updateUserInfo();return false;">更新信息</button>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="full-height-scroll">
                                    <div id="blankCourse"></div>
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover" id="course-table" style="margin-bottom:10px">
                                            <tbody id="courseList">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-3" class="tab-pane">
                                <div class="full-height-scroll">
                                    <div id="blankMsg"></div>
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover" id="msg-table">
                                            <colgroup>
                                                <col style="width: 44px" />
                                                <col style="width: 76px;" />
                                                <col style="width: 160px" />
                                                <col/>
                                                <col style="width: 68px" />
                                            </colgroup>
                                            <tbody id="msgList">
                                            </tbody>
                                        </table>
                                        <button id="more" class="btn btn-primary btn-block" onclick="moreMsg();"><i class="fa fa-arrow-down"></i> 显示更多</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/common.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<script src="js/plugins/validate/messages_zh.min.js"></script>
<script src="js/user-form-validate.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
    var pageNum = 1;
    var user = eval('(' + window.localStorage.getItem("User") + ')');
    var hasNameAready;
    function setUserInfo(){
        $("#info_name").text(user.userName);
        $("#info_imgUrl").attr('src',user.imgUrl);
        var identity;
        if(user.personType == '1'){
            identity = "学生";
        } else if(user.personType == '0'){
            identity = "教师";
        } else if(user.personType == '2'){
            identity = "专家"
        }
        $("#info_identity").text(identity);
        $("#info_registerDate").text(user.registerDate);
        if(!user.description){
            $("#info_description").text('还未填写个人简介哦~');
        } else {
            $("#info_description").text(user.description);
        }
        if(!!user.nikeName){
            hasNameAready = true;
            $("#userName").val(user.nikeName);
            $('#userName').attr("readonly","readonly");
        }
        $("#email").val(user.email);
        $("#telphone").val(user.telphone);
        $("#description").val(user.description);
    }
    function updateUserInfo(){
        var condition = {
            userId: user.userId,
            nikeName: $("#userName").val(),
            email: $("#email").val(),
            telphone: $("#telphone").val(),
            description: $("#description").val(),
            rePassword: $("#passWord").val()
        };
        if(hasNameAready){
            condition.nikeName = null;
        }
        if($("#userForm").valid()){
            // 验证通过
            postMessage(condition,"user/user", function(obj) {
                // 更新了密码重新登录
                if(!!condition.rePassword){
                    layer.alert("更新信息成功！请重新登录~", {
                            skin: 'layui-layer-lan',
                            closeBtn: 0,
                            shift: 1 //动画类型
                        }, function(){
                        window.localStorage.clear();
                        window.parent.location.href = "login.html";
                    });
                } else {
                    commonAlert("更新成功~");
                    //更新缓存
                    window.localStorage.setItem("User",JSON.stringify(obj));
                    $("#tab-1").addClass("tab-pane-hight");
                    if(hasNameAready){
                        //已经有真实姓名的去掉样式
                        $("#userName-group").removeClass("has-success");
                    }
                    $("#info_description").text(condition.description);
                }
            });
        } else {
            //验证失败
            $("#tab-1").removeClass("tab-pane-hight");
        }
        // 不知道为什么这里老师显示成功样式，先定时清除这个样式
        $("#confirm-group").removeClass("has-success");
    }
    function initCourseHtml(data){
        var html = '<tr>' +
            '    <td class="client-avatar"><img alt="image" src="'+data.imgUrl+'"> </td>' +
            '    <td><a data-toggle="tab" href="#contact-1" class="client-link">'+data.nikeName+'</a>' +
            '    </td>' +
            '    <td> 《'+data.courseName+'》</td>' +
            '    <td class="contact-type"><i class="fa fa-envelope"> </i>' +
            '    </td>' +
            '    <td> '+data.email+'</td>' +
            '    <td class="contact-type"><i class="fa fa-phone"> </i>' +
            '    </td>' +
            '    <td> '+data.telphone+'</td>' +
            '    </td>' +
            '</tr>';
        $("#courseList").append(html);
    }
    function getMessageHtml(data) {
        var html = '<tr>' +
            '    <td class="client-avatar"><img alt="image" src="'+data.teacherImgUrl+'"> </td>' +
            '    <td><a data-toggle="tab" href="#contact-1" class="client-link">'+data.teacherName+'</a>' +
            '    </td>' +
            '    <td>《'+data.courseName+'》</td>';

        if(data.valid == '0'){
            html += '<td> "'+data.content+'"</td>'+
            '<td class="client-status"><span class="label label-warning">已失效</span></td>';
        } else {
            if(data.messageType == '1'){
                html += '<td> "'+data.content+'"</td>'+
                    '<td class="client-status"><span class="label label-primary">回复'+data.toName+'</span></td>';
            } else {
                html += '<td colspan="2"> "'+data.content+'"</td>';
            }
        }
        html += '</tr>';
        return html;
    }
    function moreMsg(){
        initMsgHtml(++pageNum);
    }
    function initMsgHtml(pageNum){
        ajaxCommon({
            url: 'message/userMessages?pageNum='+pageNum+'&userId='+getUserId(),
            type: 'GET',
            async: false
        }, function(obj) {
            if(obj.code == 200){
                var data = obj.data;
                $("#blankMsg").empty();
                if(!data){
                    if(pageNum == 1){
                        var blank = '' +
                            '<div>' +
                            '   <div class="middle-box text-center animated fadeInRightBig" style="margin-bottom: 175px;">' +
                            '        <h3 class="font-bold">你还没有留言哦~</h3>' +
                            '         <div class="error-desc">(≧∇≦)ﾉ 尝试第一次留言吧！</div>' +
                            '    </div>' +
                            '</div>';
                        $("#blankMsg").append(blank);
                    } else {
                        commonAlert("没有了哦~");
                    }
                    $("#more").hide();
                    return;
                }
                for(var i in data){
                    $("#msgList").append(getMessageHtml(data[i]));
                }
            }
        }, false);
    }
    $(document).ready(function () {
        setUserInfo();
        $("#course-tab").click(function(){
            if($("#course-table").find("tr").length > 0){
                return;
            }
            ajaxCommon({
                url: 'user/teachers?userId=' + getUserId(),
                type: 'GET'
            }, function(obj) {
                if(obj.code == 200){
                    var data = obj.data;
                    $("#blankCourse").empty();
                    //无数据则显示空白样式
                    if(data.length == 0){
                        var blank = '' +
                            '  <div class="middle-box text-center animated fadeInRightBig" style="margin-bottom: 184px">' +
                            '     <h3 class="font-bold">没有已学的课程</h3>' +
                            '     <div class="error-desc">' +
                            '您可以联系管理员添加课程学习' +
                            '     </div>' +
                            '  </div>';
                        $("#blankCourse").append(blank);
                    } else {
                        for(var i in data){
                            initCourseHtml(data[i]);
                        }
                    }
                }
            }, false);
        });
        $("#msg-tab").click(function(){
            if($("#msg-table").find("tr").length > 0){
                return;
            }
            initMsgHtml(pageNum);
        });
    });
</script>
</body>
</html>
